<template>
    <div class="cook">
        <div class="back" style="text-align:left;">
            <van-button icon="arrow-left" 
                        size="small" color="#666" plain 
                        style="border:0;position:relative;
                        left:0;top:-0.2rem;" to="/">
            返回</van-button>
        </div>
        <!-- 导航下内容 -->
        <div style="overflow-y:scroll;position:fixed; 
            top:2.4rem;bottom:2.5rem;">
            <div style="height:28rem;width:100%;margin-bottom:2rem">
                <!-- 首图 -->
                <img width="100%" height="100%" :src="article.first_pic" 
                style="object-fit:cover;" @click="showPopup">
                <!-- 点击弹出完整大图 -->
                <van-popup v-model="show" style="width:100%">
                    <img :src="article.first_pic" width="100%"
                    style="object-fit:cover;" @click="show_close">
                </van-popup>
                <!-- 首图下的文章内容 -->
                <div class="context">
                    <div class="con_title">{{article.title}}</div>
                    <p class="score_p">7.3综合评分·1.9万人收藏</p>
                </div>
                <!-- 作者信息 -->
                <div class="at_content">
                    <van-image class="at_image"
                        round width="2rem" height="2rem"
                        src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
                    <h4 class="at_h4">蜂蜜四叶草</h4>
                    <van-button  class="at_btn"
                        @click="attention($event)"
                        text="关注" color="red" square>
                    </van-button>
                    <div class="at_context">
                        <!-- 内容模块 -->
                        <div class="article_text">
                            <p style="margin-top:0;line-height:2rem;font-size:18px">{{article.introduce}}</p>
                            <h4>用料</h4>
                            <div v-for="(i,index) in 3" :key="index">
                                <span class="batching">虾滑</span>
                                <span class="batching">1包</span> 
                            </div>
                            <!-- 步骤 -->
                            <div>
                                <div v-for="i in 4" :key="i">
                                    <h4 style="margin-bottom:0.7rem;">步骤{{i}}</h4>
                                    <img style="width:90%;height:13rem;object-fit:cover;" 
                                            src="../assets/images/02.jpg" alt="" @click="pop_tep">
                                    <!-- 点击弹出大图 -->
                                    <van-popup v-model="show2" style="width:100%">
                                        <img src="../assets/images/02.jpg" width="100%"
                                        style="object-fit:cover;" @click="show_close2">
                                    </van-popup>
                                    <p class="tap_p">放入蒜红辣椒爆香</p>
                                </div>
                            </div>
                        
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align:left;">
                <van-button 
                :icon="btn_icon" size="mini" :color="btn_color" plain class="btn_bottom"
                style="margin-left:0.5rem" @click="active_nav" hover-class="none">
                收藏</van-button>
                <van-button icon="photo-o" size="mini" color="#333" plain class="btn_bottom"
                style="margin-left:6rem"  @click="show_pop">
                传作品</van-button>
            </div>
            <!-- 弹出上传界面 -->
            <van-popup v-model="show_upload" style="height:100%;width:100%;background-color:#fff" closeable close-icon-position="top-left">
                <div class="upload">
                <div class="upload_btn">发布</div>
                <div class="container">
                    <!-- 上传照片 -->
                    <div class="upload_img">
                        <div style="height:88px;text-align:left;max-width:530px" :style="file_width">
                            <van-uploader v-model="fileList" multiple :max-count="6"/>
                        </div>
                    </div>
                    <!-- 发表文字-->
                    <van-cell-group inset>
                        <van-field v-model="message" rows="3" autosize type="textarea" maxlength="100" 
                        placeholder="分享下你的下厨心得、生活点滴" show-word-limit 
                        :border="false" :autofocus=true />
                    </van-cell-group>
                    <!-- 选择标签 -->
                    <van-cell class="cell_tab" title="# 标签" is-link to="/" />
                    <!-- 标签 -->
                    <div style="text-align:left;">
                        <van-button class="tag_btn" square @click="click_tag1()" :disabled="dis_btn1">
                            早餐·{{today}}
                        </van-button>
                        <van-button class="tag_btn" square @click="click_tag2()" :disabled="dis_btn2">
                            午餐·{{today}}
                        </van-button>
                        <van-button class="tag_btn" square @click="click_tag3()" :disabled="dis_btn3">
                            晚餐·{{today}}
                        </van-button>
                    </div>
                </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            show:false,
            pop_img:"",
            active_tab: "attention",
            show2:false,
            btn_color:"#333",
            btn_icon:"like-o",
            show_bom:false,
            article:{},
            show_upload:false,
            fileList:[],
            file_width:{width:"88px"},
            message:"",
            today:"",
            dis_btn1:false,
            dis_btn2:false,
            dis_btn3:false,
        }
    },
    methods:{
        nav_bar(){
        // Toast('返回');
            console.log(11111111);
        },
        // 弹出大图，先写死，后期请求时再改
        showPopup(){
            this.show=true;
            // if(this.pop_img!=""){
            //     this.pop_img="assets/images/01.jpg";
            // }
        },
        // 再次点击图片关闭显示
        show_close(){
            this.show=false;
        },
        // 关注按钮
        attention(e){
            if(e.target.style.background=="red"){
                e.target.innerHTML="已关注";
                e.target.style.background="#BEBEBE";
                // 已关注提示信息
                this.$toast.success({message: '已关注',icon: 'like-o',}); 
            }else{
                // 取消关注
                e.target.style.background="red";
                e.target.innerHTML="关注";
                this.$toast.success({message: '取消关注',icon: 'cross',});
            }
        },
        // 步骤图点击查看大图
        pop_tep(){
            this.show2=true;
        },
        show_close2(){
            this.show2=false
        },
        active_nav(){
            if(this.btn_color=="#333"){
                this.btn_color="#ee0a24"
                this.btn_icon="like"
                // 弹出提示消息
                this.$notify({ type: 'success', message: '收藏成功',duration: 1000, });
            }else{
                this.btn_color="#333"
                this.btn_icon="like-o"
                this.$notify({ type: 'danger', message: '取消收藏',duration: 1000, });
            }
            
        },
        show_pop(){
            this.show_upload=true;
        },
        // 点击按钮添加标签
        click_tag1(){
            this.message=this.message+`#早餐·${this.today}  `;
            this.dis_btn1=true;
        },
        click_tag2(){
            this.message=this.message+`#午餐·${this.today}  `;
            this.dis_btn2=true;
        },
        click_tag3(){
            this.message=this.message+`#晚餐·${this.today}  `;
            this.dis_btn3=true;
        },

    },
    mounted(){
        // 获得首页点击的文章id
        // console.log(this.$route.query.aid);
        let aid=this.$route.query.aid;
        this.axios.get(`/article/list/${aid}`).then(result=>{
            this.article=result.data.result[0];
            console.log(this.article)
        });
        // 获取时间
        var d=new Date();
        this.today=`${d.getFullYear()}年${d.getMonth()+1}月${d.getDate()}日`;
    },
    watch:{
        // 监视上传照片div宽度,当大于等于四张的时候,88px*4
        fileList(){
            if(this.fileList.length>=4){
                let w=this.file_width.width; //88px
                this.file_width.width=parseInt(w)*(this.fileList.length+1)+"px";
            }else{
                //小于四张的时候固定宽度
                this.file_width.width="330px";
                // console.log(this.file_width.width);
            }
        },
        message(){
            // 如果内容清空则标签不被禁用
            if(this.message==""){
                this.dis_btn1=false;
                this.dis_btn2=false;
                this.dis_btn3=false;
            }
        },
    }
}
</script>

<style scoped>
div{
    font-weight: 500;
    font-size: 16px;
}
/* 取消按钮点击时的灰色背景 */
.van-button::before{
    background-color:transparent;
}
.cook{
    text-decoration:none;
}
.cook>>>.van-ellipsis{
    color: rgb(253, 247, 247);
    font-size: 2rem;
    text-decoration:none;
}
/* 修改返回按钮颜色 */
.cook>>>.van-nav-bar .van-icon{
    color: black;
}
.cook>>>.van-nav-bar__text{
    color: #000;
    width: 2rem;
}
.cook .left-arrow{
    position: fixed;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
}

.cook .van-popup {
    background-color: rgba(0,0,0,0.1);
}
.cook .context .con_title{
    font-size: 24px;
    font-weight: 600;
    padding: 0 0.5rem;
    text-align: center;
    
}
/* 作者简介部分 */
.cook .at_content{
  overflow-x: hidden;
  text-align:left;
  margin-bottom:0.5rem;
}
.cook .at_content .at_image {
  position:relative; 
  top:0.8rem; left:1rem;
}
.cook .at_content .at_h4{
  position:relative; 
  top:-1rem; left:3.5rem;
  margin: 0;
}
.cook .at_content .at_btn{
  position:relative;
  top:-2.5rem; left:78%;
  border: 1px;
  border-radius:8px;
  width:3.7rem; height:2.4em;
  font-size:0.8rem;
  padding:0.5rem;
  /* visibility:visible */
}
.cook .at_content .at_context{
  width:95%;
  margin-top: -2rem;
  padding:0.1rem 0.6rem ;
}
.cook .at_content .at_text{
  position: relative;
  top:0rem;
  left: 0;
}
/* 评分的P标签 */
.cook .score_p{
    width:80%; font-weight:600;
    margin:0 auto; margin-top:0.5rem;
    padding-bottom:0.5rem;
    border-bottom:1px solid rgba(0,0,0,0.2)
}
.cook .at_content .article_text{
    padding-left:0; padding-right:0;
    padding:0 0.5rem;
}
/* 配料 */
.cook .at_content .batching{
    display:inline-block; width:50%;
    border-bottom:1px dashed #999;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    font-weight: 600;
    font-family:monospace;
}
.cook .tap_p{
    border-bottom:0.1px solid rgba(0,0,0,0.2);
    padding-bottom:1rem; width:88%;
    font-weight: 600;
}
.cook .btn_bottom{
    border:0; height:2.3rem; 
    position:fixed; bottom:0;
}
.cook .upload>.container{
    width: 90%;
    margin: 0 auto;
}
.cook .upload .cell_tab {
    text-align:left;
    margin-top:1rem; margin-bottom: 0.7rem;
    background-color:rgba(244, 249, 250,0.8);
}
.cook .upload .tag_btn{
    color:#666; background-color:rgb(235, 234, 234);
    height:2rem; margin-bottom:0.5rem; margin-right:0.5rem;
    
}

.cook .upload .upload_btn{
    position:fixed;
    top:1rem; right:1.5rem; 
    color:coral; font-weight:700;
}
.cook .upload .upload_img {
    width:100%; height:88px;
    overflow:auto;
    margin-top: 4rem;
}
/* 隐藏滚动条 */
.cook .upload .upload_img::-webkit-scrollbar{
    display: none;
}
.upload_img>>>.van-uploader__wrapper{
  -webkit-flex-wrap:nowrap;
  flex-wrap: nowrap;
}
</style>
